<template>
    <div id="hotel">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>午餐、晚餐预定查询</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        <form action="#" class="form-horizontal">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">通行证号</label>
                                            <div class="col-md-9">
                                                <passport-select ref="passportSelect" @PassportSelectChanged="onPassportSelectChanged"></passport-select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">预定状态</label>
                                            <div class="col-md-9">
                                                <el-select v-model="condition.States" multiple clearable placeholder="请选择午餐、晚餐预定状态" style="width:100%">
                                                    <el-option v-for="item of words.states" :key="item.code" :label="item.text" :value="item.code"></el-option>
                                                </el-select>                                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">订餐类型</label>
                                            <div class="col-md-9">
                                                <el-select v-model="condition.MealTypes" multiple clearable placeholder="请选择午餐、晚餐房间类型" style="width:100%">
                                                    <el-option v-for="(item, index) of Object.values(mealTypes)" :key="index" :label="item.PriceName" :value="item.PriceCode"></el-option>
                                                </el-select>                                    
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">预定日期</label>
                                            <div class="col-md-9">
                                                <el-date-picker v-model="condition.MealDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;" placeholder="选择预定日期日期"> </el-date-picker>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12 pull-right">
                                        <div style="float:right;">
                                            <!-- <button type="button" class="btn green" @click="dialogVisible=true">午餐、晚餐预定统计</button> -->
                                            <button type="button" class="btn green" @click="exportMeals()">导出预定列表</button>
                                            <button type="button" class="btn green" @click="query()">查询</button>
                                            <button type="button" class="btn default" @click="condition={}">清空条件</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- END FORM-->
                    </div>
                </div>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="meals" size="small" border style="width: 100%">
                    <el-table-column sortable align="center" prop="MealId" label="编号" width="80"></el-table-column>
                    <el-table-column sortable align="center" prop="State" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">未激活</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已激活</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="MealType" label="订餐类型" width="200">
                        <template slot-scope="scope">
                            <span>{{ typeFormat(scope.row.MealType) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="MealDate" label="预定日期" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.MealDate.substr(0, 10) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="Quantity" label="预定数量" width="200"></el-table-column>
                    <el-table-column align="center" label="团队名称" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.Passport.User.Orgnization }}
                        </template>  
                    </el-table-column> 
                    <el-table-column align="center" label="预定人" width="120">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Passport.User"></user-detail>
                        </template>  
                    </el-table-column>
                    <el-table-column align="center" label="预定时间" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    

        <div>
            <el-dialog title="预定数量统计" size="small" :visible.sync="dialogVisible">
                <el-table :data="quantities">
                    <el-table-column property="Name" label="房间类型" width="200"></el-table-column>
                    <el-table-column property="ReserveDate" label="预定日期" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.ReserveDate.substr(0, 10) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column property="ReservedCount" label="预定数量"></el-table-column>
                    <el-table-column property="RemainCount" label="剩余数量"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import UserDetail from 'views/user/user_detail.vue';
import PassportSelect from 'components/passport_select.vue';
import {DeepClone, ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        UserDetail,
        PassportSelect
    },
    filters: {
        time: TimeFormat
    },
    data() {
        return {
            meals: [],
            mealTypes: [],
            pageCount: 0,
            pageSize: 10,
            words: {
                states: [{ text: '已删除', code: -1 }, 
                         { text: '未激活', code: 0 }, 
                         { text: '已激活', code: 1 }]
            },
            condition: { 
                States: [0, 1]
            },
            dialogVisible: false,
            quantities: {}
        }
    },
    mounted() {

        // 加载午餐、晚餐类型
        this.$PriceService.getPricesByType('APHF|MEAL')
            .then(ret => {
                this.mealTypes = ret; 
            })

        this.query(null);
        
        // this.$HotelService.QueryQuantity()
        //     .then(ret => { 
        //         let quantity = [];
        //         for(let row of ret) {
        //             let roomType = this.hotelConfigs.find(o => o.type == row.RoomType);
        //             if (roomType) {
        //                 row.Name = roomType.name;
        //                 row.Quantity = roomType.quantity;
        //                 row.RemainCount = row.Quantity - row.ReservedCount;
        //                 quantity.push(row);
        //             }
        //         }
        //         this.quantities = quantity; 
        //     });
    },
    methods: {

        typeFormat(type) {
            return this.mealTypes[type].PriceName;
        },

        formatLocation(country, province) {
            return LocationStringFormat(country, province);
        },

        onPassportSelectChanged(userIds) {
            this.condition.UserIds = userIds;
        },

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$MealService.QueryMeals(this.condition, val, this.pageSize)
                .then(ret => {
                    this.meals = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 条件查询
        query() {
            Promise.all([
                this.$MealService.QueryMealsCount(this.condition),
                this.$MealService.QueryMeals(this.condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.meals = ret[1];

                for(let row of ret[1]) {
                    if (!row.MealType in this.quantities) {
                        this.quantities[row.MealType] = 0;
                    }
                    this.quantities[row.MealType] += row.Quantity; 
                }   
                console.log(this.quantities);             
            });
        },   

        exportMeals() {
            this.query();            
            this.$MealService.Export(this.condition);
        }
    }
}
</script>

<style>

</style>
